﻿(function () {
    "use strict";

    var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
    var binding = WinJS.Binding;
    var nav = WinJS.Navigation;
    var ui = WinJS.UI;
    var utils = WinJS.Utilities;

    var bShowFullScreen = false;
    var barTimeEvt = null;

    ui.Pages.define("/pages/fullscreen/fullscreen.html", {

        /// <field type="WinJS.Binding.List" />
        _items: null,
        _group: null,
        _itemSelectionIndex: -1,

        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            
            var imgFlipView = element.querySelector(".full-flip").winControl;

            // Store information about the group and selection that this page will
            // display.
            this._group = (options && options.pageURL) ? Data.resolveGroupReference(options.pageURL) : null;
            if (this._group == null) {
                WinJS.Navigation.back(1);
                return;
            }

            this._items = Data.getItemsFromGroup(options.pageURL);
            
            // Set up the img FlipView
            imgFlipView.itemDataSource = this._items.dataSource;
            imgFlipView.itemTemplate = element.querySelector(".imgtemplate");
            imgFlipView.currentPage = (options && options.curPage) ? options.curPage : 1;
            imgFlipView.onpagecompleted = function () {                
                $(".img-source").each(function (index, img) {                    
                    if (img.width < img.height) {
                        img.style.height = "100%";
                        img.style.width = "auto";
                    }
                    else {
                        img.style.height = "100%";
                        img.style.width = "auto";
                    }
                })
            };
                        
            $(".win-backbutton").css("margin-top", "0px");
            $(".win-backbutton").css("margin-left", "10px");
            $(".img-overlay").hide();
            
            $(".full-image").click(function () {
                if (barTimeEvt) {
                    clearTimeout(barTimeEvt);
                }
                $(".img-overlay").slideDown(200);
                barTimeEvt = setTimeout(function () {
                    $(".img-overlay").slideUp(200);
                    $(".img-overlay").hide();
                }, 3000);
            });

            

            //this._updateVisibility();
            //if (this._isSingleColumn()) {
            //    if (this._itemSelectionIndex >= 0) {
            //        // For single-column detail view, load the article.
            //        //binding.processAll(element.querySelector(".articlesection"), this._items.getAt(this._itemSelectionIndex));
            //    }
            //} else {
            //    if (nav.canGoBack && nav.history.backStack[nav.history.backStack.length - 1].location === "/pages/split/split.html") {
            //        // Clean up the backstack to handle a user snapping, navigating
            //        // away, unsnapping, and then returning to this page.
            //        nav.history.backStack.pop();
            //    }
            //    // If this page has a selectionIndex, make that selection
            //    // appear in the ListView.
            //    //listView.selection.set(Math.max(this._itemSelectionIndex, 0));
            //}

            //document.body.addEventListener("dblclick", showFullScreen, false);
            //document.querySelector(".articlesection").addEventListener("mousewheel", navigateWithMouse, false);
        },

        unload: function () {
            if (this._items) {
                this._items.dispose();
            }
        },

        // This function updates the page layout in response to viewState changes.
        //updateLayout: function (element, viewState, lastViewState) {
        //    /// <param name="element" domElement="true" />

        //    var listView = element.querySelector(".itemlist").winControl;
        //    var firstVisible = listView.indexOfFirstVisible;
        //    this._updateVisibility();

        //    var handler = function (e) {
        //        listView.removeEventListener("contentanimating", handler, false);
        //        e.preventDefault();
        //    }

        //    if (this._isSingleColumn()) {
        //        listView.selection.clear();
        //        if (this._itemSelectionIndex >= 0) {
        //            // If the app has snapped into a single-column detail view,
        //            // add the single-column list view to the backstack.
        //            nav.history.current.state = {
        //                groupKey: this._group.key,
        //                selectedIndex: this._itemSelectionIndex
        //            };
        //            nav.history.backStack.push({
        //                location: "/pages/split/split.html",
        //                state: { groupKey: this._group.key }
        //            });
        //            element.querySelector(".articlesection").focus();
        //        } else {
        //            listView.addEventListener("contentanimating", handler, false);
        //            if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) {
        //                listView.indexOfFirstVisible = firstVisible;
        //            }
        //            listView.forceLayout();
        //        }
        //    } else {
        //        // If the app has unsnapped into the two-column view, remove any
        //        // splitPage instances that got added to the backstack.
        //        if (nav.canGoBack && nav.history.backStack[nav.history.backStack.length - 1].location === "/pages/split/split.html") {
        //            nav.history.backStack.pop();
        //        }
        //        if (viewState !== lastViewState) {
        //            listView.addEventListener("contentanimating", handler, false);
        //            if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) {
        //                listView.indexOfFirstVisible = firstVisible;
        //            }
        //            listView.forceLayout();
        //        }

        //        listView.selection.set(this._itemSelectionIndex >= 0 ? this._itemSelectionIndex : Math.max(firstVisible, 0));
        //    }
        //},

        // This function checks if the list and details columns should be displayed
        // on separate pages instead of side-by-side.
        //_isSingleColumn: function () {
        //    var viewState = Windows.UI.ViewManagement.ApplicationView.value;
        //    return (viewState === appViewState.snapped || viewState === appViewState.fullScreenPortrait);
        //},

        //_selectionChanged: function (args) {
        //    var listView = document.body.querySelector(".itemlist").winControl;
        //    var details;
        //    // By default, the selection is restriced to a single item.
        //    listView.selection.getItems().done(function updateDetails(items) {
        //        if (items.length > 0) {
        //            this._itemSelectionIndex = items[0].index;
        //            if (this._isSingleColumn()) {
        //                // If snapped or portrait, navigate to a new page containing the
        //                // selected item's details.
        //                nav.navigate("/pages/split/split.html", { groupKey: this._group.key, selectedIndex: this._itemSelectionIndex });
        //            } else {
        //                document.querySelector(".imgDetail").winControl.currentPage = this._itemSelectionIndex;
        //                // If fullscreen or filled, update the details column with new data.                        
        //                details = document.querySelector(".img-viewer");
        //                //details.style.backgroundImage = "url('" + items[0].data.backgroundImage + "')";
        //                //document.querySelector(".image-source").attributes.getNamedItem("src").nodeValue = items[0].data.backgroundImage;
        //                binding.processAll(details, items[0].data);
        //                //details.scrollTop = 0;
        //            }
        //        }
        //    }.bind(this));
        //},

        //_flipPageCompleted: function (args) {
        //    var imgFlipView = document.querySelector(".imgDetail").winControl;            
        //    var listView = document.body.querySelector(".itemlist").winControl;
        //    //listView.selection.clear();
        //    //listView.selection.add(imgFlipView.currentPage);
        //},
        

        // This function toggles visibility of the two columns based on the current
        // view state and item selection.
        //_updateVisibility: function () {
        //    var oldPrimary = document.querySelector(".primarycolumn");
        //    if (oldPrimary) {
        //        utils.removeClass(oldPrimary, "primarycolumn");
        //    }
        //    if (this._isSingleColumn()) {
        //        if (this._itemSelectionIndex >= 0) {
        //            utils.addClass(document.querySelector(".articlesection"), "primarycolumn");
        //            document.querySelector(".articlesection").focus();
        //        } else {
        //            utils.addClass(document.querySelector(".itemlistsection"), "primarycolumn");
        //            document.querySelector(".itemlist").focus();
        //        }
        //    } else {
        //        document.querySelector(".itemlist").focus();
        //    }
        //},
    });    
})();